<style scoped>
.schart {
  width: 600px;
  display: inline-block;
}
.search{
  margin: 20px 40px;
}
</style>
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
        <el-breadcrumb-item>微信数据图表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="schart">
      <div id="chartLine1" style="width:500px; height:400px;"></div>
      <div>
        <el-date-picker
          class="search"
          v-model="summary"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-button type="primary" @click="search('summary')" :loading="loading">查询</el-button>
      </div>
    </div>
    <div class="schart">
      <div id="chartLine2" style="width:500px; height:400px;"></div>
      <div>
        <el-date-picker
          class="search"
          v-model="cumulate"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-button type="primary" @click="search('cumulate')" :loading="loading">查询</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  components: {
    echarts
  },
  data () {
    return {
      wxSummary: {
        ref_date: [],
        new_user: [],
        cancel_user: [],
        user_source: []
      },
      summary: undefined,
      loading: false,
      wxCumulate: {
        ref_date: [],
        cumulate_user: []
      },
      cumulate: undefined,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  mounted () {
    this.loading = true;
    APP.ajax('analysis/wxSummary', {}, res => {
      // 获取到数据，日期相同的需要叠加
      let wxSummary = this.dataAdd(res.data.data.list);
      // 管理数据
      this.dataSummaryRectification(wxSummary, this.wxSummary);
      // 绘制
      this.drawSummaryLineChart();
    });
    APP.ajax('analysis/wxCumulate', {}, res => {
      this.dataCumulateRectification(res.data.data.list, this.wxCumulate);
      this.drawCumulateLineChart();
      this.loading = false;
    });
  },
  methods: {
    // 相同日期数据相加
    dataAdd (data) {
      let user = [];
      for(var i = 0; i < data.length-1; i++){
        if (data[i].ref_date === data[i + 1].ref_date) {
          data[i + 1].cancel_user = data[i].cancel_user + data[i + 1].cancel_user;
          data[i + 1].user_source = data[i].user_source + data[i + 1].user_source;
          data[i + 1].new_user = data[i].new_user + data[i + 1].new_user;
        }  
        if(data[i].ref_date !== data[i + 1].ref_date) {
          user.push(data[i]);
        }
      }
      user.push(data[data.length - 1]);
      return user;
    },
    // 数据整理
    dataSummaryRectification(data, sourceData) {
      data.forEach(el => {
        sourceData.ref_date.push(el.ref_date.substring(5));
        sourceData.user_source.push(el.user_source);
        sourceData.new_user.push(el.new_user);
        sourceData.cancel_user.push(el.cancel_user);
      });
    },
    dataCumulateRectification(data, sourceData) {
      data.forEach(el => {
        sourceData.ref_date.push(el.ref_date.substring(5));
        sourceData.cumulate_user.push(el.cumulate_user);
      })
    },
    // 绘制图形
    drawSummaryLineChart () {
      this.chartLine = echarts.init(document.getElementById('chartLine1'))
      this.chartLine.setOption({
        title: {
          text: '微信统计数据'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['微信活跃用户', '新用户', '取关用户']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0
          },
          boundaryGap: false,
          data: this.wxSummary.ref_date
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '微信活跃用户',
            type: 'line',
            data: this.wxSummary.user_source
          },
          {
            name: '新用户',
            type: 'line',
            data: this.wxSummary.new_user
          },
          {
            name: '取关用户',
            type: 'line',
            data: this.wxSummary.cancel_user
          }
        ]
      })
    },
    drawCumulateLineChart(){
      this.chartLine = echarts.init(document.getElementById('chartLine2'))
      this.chartLine.setOption({
        title: {
          text: '微信累积用户'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['累积用户']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0
          },
          boundaryGap: false,
          data: this.wxCumulate.ref_date
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '累积用户',
            type: 'line',
            data: this.wxCumulate.cumulate_user
          }
        ]
      });
    },
    search(ev) {
      this.loading = true;
      if (this[ev] === undefined) {
        this.$message.info('请输入时间!');
        this.loading = false;
        return
      }
      // 发送数据的from
      let from = this[ev].getFullYear() + '-' + (this[ev].getMonth() + 1) + '-' + this[ev].getDate();
      // 发送数据的to
      let to = new Date(this[ev]);
      // 时间加6天，为当周的时间 1-7
      to.setDate(this[ev].getDate() + 6);
      // 如果日期大于今天，则等于昨天(不能等于今天，否则报错)
      if (to >= new Date()) {
        to = new Date();
        to = to.getFullYear() + '-' + (to.getMonth() + 1) + '-' + (to.getDate() - 1);
      } else {
        to = to.getFullYear() + '-' + (to.getMonth() + 1) + '-' + to.getDate();
      }
      if (ev === 'summary') {
        APP.ajax('analysis/wxSummary', {from: from, to: to}, res => {
          // 清空数据，以免冗余
          this.wxSummary.ref_date = [];
          this.wxSummary.user_source = [];
          this.wxSummary.cancel_user = [];
          this.wxSummary.new_user = [];
          let wxSummary = this.dataAdd(res.data.data.list);
          this.dataSummaryRectification(wxSummary, this.wxSummary);
          this.drawSummaryLineChart();
          this.loading = false;
        });
      } else {
        APP.ajax('analysis/wxCumulate', {from: from, to: to}, res => {
          this.wxCumulate.ref_date = [];
          this.wxCumulate.cumulate_user = [];
          this.dataCumulateRectification(res.data.data.list, this.wxCumulate);
          this.drawCumulateLineChart();
          this.loading = false;
        });
      } 
    }
  }
}
</script>
